<template>
  <div>
    <el-row>
      <el-col>
        <div id="splashes" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let splashes = this.$echarts.init(document.getElementById('splashes'));
        // 绘制图表
        splashes.setOption(
          {
            title: {
              text: '',
              subtext:'',
              right:'center',
              top:'1%'
            },
            legend: {
              right: 10,
              data: ['1990', '2015']
            },
            xAxis: {
              data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
              /*splitLine: {
                  lineStyle: {
                      type: 'dashed'
                  }
              }*/
            },
            yAxis: {},
            series: [{
              type: 'scatter',
              name:'1990',
              symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              symbolSize: function (data) {
                return Math.sqrt(data[1]) * 2;
              },
              label: {
                emphasis: {
                  show: true,
                  formatter: function (param) {
                    return param.data[2];
                  },
                  position: 'top'
                }
              },
              data:[
                ['Sun',50],
                ['Mon',210],
                ['Tue',90],
                ['Wed',234],
                ['Thu',100],
                ['Fri',330],
                ['Sat',400]
              ]
            }]
          }
        );
      }
    }
  }
</script>

<style scoped>

</style>
